<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	</head>
	<body>
		<!-- //11. 已知页面有一段文字，设置一个按钮，点击可以控制该段文字的显示和隐藏。
如果文字隐藏，那么显示。
如果文字显示，那么隐藏。

使用v-if和v-show实现，并分析v-if和v-show有什么区别？ -->
	<div id="app">
		
		<textarea v-if="result" rows="10" cols="100">
			<label >已知页面有一段文字，设置一个按钮，点击可以控制该段文字的显示和隐藏。
如果文字隐藏，那么显示。
如果文字显示，那么隐藏。</label></textarea>
	
		<button v-on:click="show()">显示</button>
		<button v-on:click="conceal()">隐藏</button>
		
	</div>
	<script>
		let app = new Vue({
			el:'#app',
			data:{
				result:true
			},
			methods:{
				show:function(){
					this.result = true;
				},
				conceal:function(){
					this.result = false;					
				}
			}
		});
	</script>
	</body>
</html>
